<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0,0,0,0.6);
            /*固定定位以视口(html窗口)为参照物
            紧贴四个边,实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda debitis doloribus, error est
            labore nulla pariatur quas quos repudiandae, sit suscipit, ullam voluptatem! Maiores quis sit vel? Dolore,
            quaerat!
        </div>
        <div>Ad asperiores beatae commodi culpa debitis deleniti dolorem ea earum ipsum itaque iusto, libero magni minus
            odit sed totam ut. Beatae eligendi excepturi facilis iusto modi molestiae nulla obcaecati sunt?
        </div>
        <div>Animi aperiam asperiores beatae corporis culpa cupiditate distinctio dolore eveniet in ipsam ipsum iure
            magni minus nemo nobis obcaecati officiis perspiciatis quas quasi, quisquam ratione reprehenderit sint
            veniam vero voluptatem!
        </div>
        <div>Architecto consequuntur delectus doloremque dolores, ea eligendi expedita in libero nemo nisi non, optio
            possimus quae quidem rem sed suscipit? Aspernatur, excepturi iusto molestiae qui quos reiciendis temporibus.
            Culpa, odit?
        </div>
        <div>Blanditiis dolorem earum error laboriosam nihil nobis possimus quae quis! Accusamus consectetur dignissimos
            distinctio eaque expedita facilis laboriosam placeat provident, quaerat qui repellendus sint totam, velit
            veniam voluptas. Animi, quod.
        </div>
        <div>A ab ad adipisci aliquid animi beatae delectus dolorem doloremque, eos, error est excepturi explicabo hic
            illum neque nesciunt nihil quia quo reprehenderit sapiente sequi sint sunt vel voluptas voluptatum.
        </div>
        <div>Accusamus beatae consequatur cumque doloremque doloribus nihil possimus ullam ut vero. Aut consequatur
            dignissimos doloremque eligendi laudantium obcaecati odio provident quasi qui, sapiente, sit, sunt vero!
            Adipisci in laborum odio.
        </div>
        <div>Aspernatur, aut consequuntur, dignissimos ducimus hic inventore iste laborum neque nesciunt quasi, quia
            reprehenderit! Animi doloribus in incidunt libero magnam necessitatibus soluta ullam vero voluptate
            voluptatum. Consectetur nihil repellat sed.
        </div>
        <div>Adipisci animi aspernatur dolor dolores doloribus expedita harum illum molestiae necessitatibus provident,
            sapiente soluta sunt, suscipit totam ullam. Amet, animi asperiores aut dolore labore magni saepe vel
            voluptate! Odit, rem!
        </div>
        <div>Enim hic laboriosam maiores nisi ullam. Culpa dicta exercitationem incidunt, quae quia quos reiciendis sed
            sunt tenetur vero? A, aut cumque dolorem dolorum esse facilis id perspiciatis quasi rem saepe?
        </div>
        <div>Ab aliquid asperiores, delectus ea earum eos esse iure minima, quae quaerat qui quibusdam quisquam
            recusandae repellat sequi, tempore veniam vero. Ad commodi consectetur consequatur dicta, excepturi nulla
            sequi voluptatum!
        </div>
        <div>A accusamus aut consectetur consequuntur dolor dolore dolorem excepturi fuga illum labore laborum
            laudantium modi nobis officia, perferendis perspiciatis possimus praesentium quas qui quia quod quos sit
            suscipit tempore vel?
        </div>
        <div>Amet atque distinctio dolorem doloribus eum eveniet expedita fugiat, hic optio sed suscipit temporibus,
            vitae voluptatibus. Animi eligendi exercitationem, illo impedit laborum maxime natus officia quaerat quas
            temporibus ullam unde.
        </div>
        <div>Aperiam fuga ipsum modi omnis repellat. Amet architecto debitis doloribus dolorum eligendi eveniet in
            minima nam, natus officiis quaerat quod voluptatum! Animi aut delectus fugit laborum porro quo repudiandae
            voluptatibus.
        </div>
        <div>Aliquid aspernatur beatae, dignissimos eos harum in incidunt, iste laboriosam obcaecati optio perspiciatis
            quia ratione repellat sapiente, similique vitae voluptatem. Aliquid animi autem deleniti dignissimos ea
            magnam minus quidem vero.
        </div>
        <div>Aut autem dicta dolor, dolore earum eum impedit iure molestias, mollitia nemo neque possimus qui quo
            ratione reiciendis repellat repellendus sit tenetur voluptas voluptatibus? Animi corporis in nostrum
            praesentium voluptas!
        </div>
        <div>Deleniti facilis modi molestiae provident sit. Aspernatur autem consequuntur ex explicabo, fuga incidunt
            iste iusto laudantium minima, nam neque nihil non perspiciatis quaerat qui quisquam repellat sequi tempora
            velit voluptates!
        </div>
        <div>Aliquid deleniti ducimus hic illo ipsam itaque quibusdam. Ab adipisci aliquid atque debitis dicta, enim
            eos, facilis incidunt numquam possimus quam tenetur veniam voluptatem. Consequuntur cum labore mollitia non
            quisquam!
        </div>
        <div>A commodi hic, ipsam iste laudantium maxime modi praesentium reiciendis repellat sapiente sequi suscipit?
            Alias autem deleniti, dolore dolores impedit ipsam ipsum iusto laudantium libero nesciunt nulla pariatur
            porro repellat.
        </div>
        <div>Accusantium cupiditate deleniti earum eius impedit laudantium maxime neque recusandae veniam voluptates.
            Accusantium amet aperiam consequuntur, ducimus error illo illum, ipsam molestias quidem repellendus
            reprehenderit sit sunt tempora veniam voluptates?
        </div>
        <div>A dignissimos magnam natus? Commodi corporis eaque explicabo ipsam odit ratione sint sunt voluptas.
            Consequuntur dolore error est expedita libero odit quod, tempore unde veniam vitae. Accusamus est
            praesentium sunt.
        </div>
        <div>Ab blanditiis dicta ducimus eligendi esse excepturi modi molestiae, nostrum nulla odio optio, pariatur
            perspiciatis praesentium quos recusandae rem sapiente! Cupiditate dolor earum error ipsa itaque nesciunt
            officiis quo ratione!
        </div>
        <div>A amet aspernatur consequuntur cupiditate dicta dolor doloremque doloribus eius et ex facilis fuga, ipsum
            magni maxime nisi nulla officia provident reiciendis repudiandae sed, suscipit voluptates voluptatibus
            voluptatum! Incidunt, porro!
        </div>
        <div>Maxime, minus, vitae. Ad delectus deleniti dolores ea enim eos error exercitationem fuga fugiat in ipsum
            iste modi molestias necessitatibus nihil non officiis perferendis perspiciatis porro qui, quis, rerum
            tempora.
        </div>
        <div>At commodi dolorem et itaque labore, modi nostrum. Animi autem culpa eius eos iure magnam maiores quae,
            repellendus reprehenderit repudiandae. Cum dignissimos doloribus expedita explicabo nemo nesciunt placeat
            provident, rerum?
        </div>
        <div>A ab accusantium ad aperiam atque, consectetur consequatur deserunt dicta doloremque eligendi et facere id
            inventore labore laudantium maiores minima minus, molestiae nobis obcaecati praesentium quo rerum saepe,
            unde vitae!
        </div>
        <div>Corporis delectus dolore illum magnam obcaecati quia, quis. Fuga fugit magni suscipit! Accusantium alias
            aspernatur assumenda deserunt distinctio eius, et ipsam ipsum itaque libero nihil quas reprehenderit saepe
            suscipit tenetur?
        </div>
        <div>Accusantium corporis cumque ipsa laboriosam molestiae nam quod reprehenderit sint sunt voluptate. Cum
            cumque dolorum ducimus est fugiat, fugit omnis quae quibusdam quo similique. Asperiores eveniet iste quas
            voluptatem voluptatum.
        </div>
        <div>Ab amet animi at consequatur cupiditate debitis ea eius error esse, illum iste magni maiores minus
            molestias nemo neque nobis nulla odit optio provident, quidem repudiandae sapiente tempora. Officiis, totam.
        </div>
        <div>Accusamus aspernatur esse itaque minima minus modi molestiae placeat quasi unde voluptates. Accusantium
            dolor iure nemo neque numquam obcaecati porro praesentium quidem recusandae sit. Labore nisi optio soluta
            totam vero.
        </div>
        <div>Alias at ducimus eveniet ex inventore nam nobis! Delectus deserunt dolores facere nobis non repellendus
            saepe. Culpa quod totam vel. Accusantium atque autem fugiat impedit ipsa libero quas saepe, voluptatibus?
        </div>
        <div>Facere labore quaerat totam. Assumenda illo illum nisi possimus praesentium tempore veniam. A architecto
            aut eius possimus quasi, recusandae repudiandae. Atque consequatur debitis eum maiores non quam, quas
            tempora vel!
        </div>
        <div>Architecto blanditiis consequatur corporis distinctio expedita fugiat inventore libero quos, sequi ut.
            Consequatur distinctio fugit illo labore quas quidem repellat similique ut vero voluptatibus. Eligendi
            laudantium quis suscipit voluptatem voluptatum!
        </div>
        <div>Aperiam architecto atque consequatur, debitis doloremque, expedita facilis, ipsam libero qui ratione
            repellendus repudiandae vitae. Ad aliquam animi dolores, eos impedit ipsum magni maiores mollitia, quasi
            sint ut voluptate, voluptatum!
        </div>
        <div>Asperiores earum eos labore numquam pariatur quasi veniam voluptates! Ad amet dolor id ipsa natus quod
            soluta, tempore tenetur unde vero vitae, voluptatum? Adipisci asperiores illo perferendis, quasi repellat
            sapiente.
        </div>
        <div>Aliquid animi aperiam architecto aspernatur autem dolor, ducimus et eveniet ex, facere in itaque iusto
            laborum magnam molestiae nesciunt perferendis quas quibusdam ratione repellat sequi, similique sint tempora
            tenetur vitae!
        </div>
        <div>Adipisci at atque consectetur cum doloremque dolores, eos explicabo facere iste iure nesciunt nisi pariatur
            quasi quis quisquam quo ratione saepe, sed sunt tenetur veniam voluptate voluptates? Dicta, neque nihil.
        </div>
        <div>Aliquam assumenda blanditiis cum doloribus eaque ex expedita explicabo labore maxime minima, quae quo,
            similique sit. Alias aliquam, amet, beatae delectus dolore doloremque fuga incidunt neque praesentium
            quaerat quis repellendus.
        </div>
        <div>Aut dolore est expedita vel? Accusamus at cupiditate delectus deserunt, dolore expedita iste molestiae
            mollitia, nesciunt nulla, odio perspiciatis quos recusandae sint vel! Deserunt, dolorum itaque nemo nisi
            odit repellendus.
        </div>
        <div>Autem beatae consectetur ducimus eligendi expedita fuga in, incidunt itaque labore laboriosam laudantium
            libero minima non nulla odio perspiciatis quaerat quo reiciendis tempore tenetur ullam unde veritatis vero
            voluptatibus voluptatum?
        </div>
        <div>Asperiores deleniti earum eius enim et, explicabo laboriosam laborum magnam mollitia non numquam odio
            possimus qui tempora vero? Culpa, cumque quas! Dolor est expedita laboriosam officiis qui sit totam veniam?
        </div>
        <div>Animi ea facilis impedit in, itaque perspiciatis veniam voluptatem voluptatum? Adipisci aliquam animi
            dolorum modi nostrum ratione suscipit! Debitis doloribus expedita fuga iure nostrum nulla porro quisquam
            sapiente similique ullam!
        </div>
        <div>A animi, aspernatur blanditiis consectetur dolore earum error esse est ex exercitationem id libero modi,
            nemo nobis nostrum omnis pariatur quibusdam recusandae rem sit tempora ullam ut velit vero, voluptatibus!
        </div>
        <div>Accusantium aspernatur cum delectus distinctio doloremque ea eligendi enim expedita explicabo facilis
            fugiat laboriosam laudantium minima molestias nesciunt, nobis officia pariatur perferendis quas sit vel,
            vero voluptatibus. Cumque, praesentium, voluptas?
        </div>
        <div>Accusantium at beatae consequatur corporis cum debitis dicta eos, id impedit labore nemo, officiis optio,
            quam quibusdam quisquam tempora velit! Delectus doloribus eius iure officia quia soluta temporibus velit
            vero.
        </div>
        <div>Adipisci aut consequatur dolorem dolorum ea eos iusto mollitia nam nihil, non pariatur perferendis
            perspiciatis sit vero vitae. Distinctio dolorem doloremque fuga illum laboriosam nostrum odio sapiente,
            velit veniam vero.
        </div>
        <div>Debitis, dolorum, temporibus. Aliquid animi aut commodi dignissimos, dolorum eligendi eos eveniet explicabo
            fugit ipsam magnam magni officia pariatur perspiciatis quibusdam quos repellat repellendus sapiente sint
            sunt totam unde voluptate.
        </div>
        <div>Ab, aut commodi, delectus ea eligendi eos facere harum mollitia nostrum repellendus sapiente unde.
            Accusantium autem consequuntur deleniti eos excepturi laborum minus tempora tenetur voluptate voluptatum! A,
            asperiores, soluta? Et.
        </div>
        <div>A asperiores atque beatae consequuntur, cupiditate doloremque esse harum illo illum maiores nihil numquam
            quaerat quas ratione rem repudiandae voluptate voluptates voluptatum. Accusamus distinctio fugiat ipsam
            officiis optio quae reiciendis!
        </div>
        <div>At autem consequuntur dolores ea, earum esse eveniet exercitationem expedita itaque magni minus molestias
            mollitia nam neque nihil odio possimus quis quisquam repellendus repudiandae sed tempora ullam unde vero
            voluptas.
        </div>
    </div>

</body>
</html>